
<template>
  <el-card shadow="never"
            class="aui-card--fill">
    <div>
        <el-form :inline="true"
                :model="dataForm"
              >
        <el-form-item>
            <ejs-daterangepicker :placeholder="$t('custom.marketbot.clientUsageReport.selectDate')" style="width:200px;"
            :format="dateRangeDefaultSetting.format" v-model="dataForm.searchDate" @change="query" :strictMode="dateRangeDefaultSetting.selectionMode"
            :showClearButton='false' :allowEdit='false'
            >
            <e-presets>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisWeek')" :start='dateRangeDefaultSetting.weekStartDate' :end='dateRangeDefaultSetting.weekEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.thisMonth')" :start='dateRangeDefaultSetting.monthStartDate' :end='dateRangeDefaultSetting.monthEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastMonth')" :start='dateRangeDefaultSetting.lastMonthStartDate' :end='dateRangeDefaultSetting.lastMonthEndDate'></e-preset>
                <e-preset :label="$t('custom.marketbot.clientUsageReport.lastYear')" :start='dateRangeDefaultSetting.lastYearStartDate' :end='dateRangeDefaultSetting.lastYearEndDate'></e-preset>
            </e-presets>
        </ejs-daterangepicker>
        </el-form-item>
        <el-form-item>
          <select-user-id-input @resetSearch="userChange" />
        </el-form-item>
        <el-form-item>
          <select-bots-input @resetSearch="botsChange" />
        </el-form-item>
      </el-form>
      <div class="control-section">
      <div class="content-wrapper" v-loading="loading">
        <ejs-pivotview
          :dataSourceSettings="pivotTableDefaultSetting.dataSourceSettings"
          :gridSettings="pivotTableDefaultSetting.gridSettings"
          :width="pivotTableDefaultSetting.width"
          :height="pivotTableDefaultSetting.height"
          :allowDrillThrough="pivotTableDefaultSetting.allowDrillThrough"
          :showTooltip="pivotTableDefaultSetting.showTooltip"
          :showFieldList="pivotTableDefaultSetting.showFieldList"
          :load="load"
          :allowExcelExport="pivotTableDefaultSetting.allowExcelExport"
          :allowConditionalFormatting="pivotTableDefaultSetting.allowConditionalFormatting"
          :allowNumberFormatting="pivotTableDefaultSetting.allowNumberFormatting"
          :allowPdfExport="pivotTableDefaultSetting.allowPdfExport"
          :showToolbar="pivotTableDefaultSetting.showToolbar"
          :allowCalculatedField="pivotTableDefaultSetting.allowCalculatedField"
          :toolbar="pivotTableDefaultSetting.toolbar"
          :toolbarRender="beforeToolbarRender"
          :displayOption="pivotTableDefaultSetting.displayOption"
          :chartSettings="pivotTableDefaultSetting.chartSettings"
          :enableValueSorting="pivotTableDefaultSetting.enableValueSorting"
          ref="pivotview"
        >
        </ejs-pivotview>
      </div>
    </div>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/report-view-module'
import moment from 'moment'
import SelectBotsInput from '@/components/search-input/select-bots-input'
import SelectUserIdInput from '@/components/search-input/select-user-id-input'
export default {
  mixins: [mixinViewModule],
  components: { SelectUserIdInput, SelectBotsInput },
  data () {
    return {
      mixinViewModuleOptions: {
        pageId: 'bots-trigger-report'
      },
      pivotTableDefaultSetting: {
        dataSourceSettings: {
          dataSource: null,
          values: [
            { name: 'triggerCount', caption: this.$t('custom.clientbot.bottriggerreport.triggerCount') }
          ],
          formatSettings: [{ name: 'Amount', format: 'C0' }],
          columns: [
            { name: 'createDate', caption: this.$t('custom.clientbot.bottriggerreport.createDate') }
          ],
          rows: [{ name: 'botName', caption: this.$t('custom.clientbot.bottriggerreport.botName') }, { name: 'userName', caption: this.$t('custom.clientbot.bottriggerreport.userName') }],
          filters: [
          ]
        },
        height: window.innerHeight - 230
      },
      dataForm: {
        tenantCode: null,
        userId: null,
        ruleId: null,
        searchDate: null
      }

    }
  },

  created () {

  },
  methods: {
    resetDataForm () {
      this.dataForm.searchDate = [this.dateRangeDefaultSetting.weekStartDate, this.dateRangeDefaultSetting.weekEndDate]
    },
    load (item) {
      this.grid = item
      this.query()
    },
    getDataListAPI () {
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        userId: this.dataForm.userId
      }
      if (this.dataForm.searchDate && this.dataForm.searchDate.length >= 2) {
        params.dateFrom = moment(this.dataForm.searchDate[0]).format('YYYY-MM-DD')
        params.dateTo = moment(this.dataForm.searchDate[1]).format('YYYY-MM-DD')
      } else {
        delete params.dateFrom
        delete params.dateTo
      }
      return this.$interface.clientReport.getBotsTriggerReport(params)
    },
    userChange (e) {
      this.dataForm.userId = e
      this.query()
    },
    botsChange (e) {
      this.dataForm.ruleId = e
      this.query()
    }

  }
}
</script>
<style scoped>
.e-custom-class {
  text-decoration: underline;
}

.e-custom-class:hover {
  color: red;
  text-decoration: none;
}
</style>
